/*svg colors */

.cls-1 {
    fill: #e8f3e2;
}

.cls-2 {
    fill: #faf4a8;
}

.cls-3 {
    fill: #cac277;
}

.cls-4 {
    fill: #f3ca76;
}

.cls-5 {
    fill: #fdf387;
}

.cls-6 {
    fill: #c2e4d8;
}

.cls-7 {
    fill: #aedccd;
}

.cls-8 {
    opacity: 0.5;
}

.cls-10,
.cls-16,
.cls-17,
.cls-22,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
    fill: none;
}

.cls-16,
.cls-17,
.cls-9 {
    stroke: #dab6c4;
}

.cls-10,
.cls-18,
.cls-19,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
    stroke-miterlimit: 10;
}

.cls-10 {
    stroke: #e6d0d8;
}

.cls-11 {
    fill: #e7d0d8;
}

.cls-12 {
    fill: #dab6c4;
}

.cls-13,
.cls-18 {
    fill: #b5d780;
}

.cls-14 {
    fill: #9cb17e;
}

.cls-15 {
    fill: #f16a83;
}

.cls-16,
.cls-17 {
    stroke-linejoin: bevel;
    stroke-width: 2px;
}

.cls-17 {
    stroke-dasharray: 14.92 4.97;
}

.cls-18 {
    stroke: #b5d780;
}

.cls-18,
.cls-19 {
    stroke-width: 0.25px;
}

.cls-19,
.cls-21 {
    fill: #aec58b;
}

.cls-19 {
    stroke: #aec58b;
}

.cls-20 {
    fill: #7d8a71;
}

.cls-23 {
    fill: #f69eac;
}

.cls-24 {
    fill: #c38f98;
}

.cls-25 {
    fill: #816872;
}

.cls-26 {
    fill: #6d6066;
}

.cls-27 {
    fill: #806871;
}

.cls-28 {
    fill: #dbbf53;
}

.cls-29 {
    fill: #bfcf30;
}

.cls-30 {
    fill: #b29ea7;
}

.cls-31 {
    fill: #8d6876;
}

.cls-32,
.cls-48 {
    stroke: #8d6876;
}

.cls-32 {
    opacity: 0.6;
}

.cls-33 {
    fill: #d2a849;
}

.cls-34 {
    fill: #e0b24d;
}

.cls-35 {
    fill: #bf6872;
}

.cls-36 {
    fill: #f0bf53;
}

.cls-37 {
    fill: #c6c49e;
}

.cls-38 {
    stroke: #f69eac;
}

.cls-39 {
    stroke: #c38f98;
}

.cls-40 {
    fill: #c5c072;
}

.cls-41 {
    fill: #fdf164;
}

.cls-42 {
    fill: #dbedd1;
}

.cls-43 {
    fill: #b2beaf;
}

.cls-44 {
    fill: #feeb19;
}

.cls-45 {
    fill: #9998c8;
}

.cls-46 {
    fill: #fef5b1;
}

.cls-47 {
    fill: #fac1c4;
}

.cls-49 {
    fill: #bfa264;
}

.cls-50 {
    stroke: #806871;
}

.cls-51 {
    fill: #ce9d2b;
}

.cls-52 {
    fill: #c06975;
}

.cls-53 {
    fill: #e0efd3;
}

.cls-54 {
    fill: #b9e1d2;
}

.cls-55 {
    fill: #fff;
}

.cls-56 {
    stroke: #231f20;
}

.cls-57 {
    fill: #ffefb8;
}

.cls-58 {
    fill: #dfedc9;
}

.cls-59 {
    fill: #f6d695;
}

.cls-60 {
    fill: #fcd6d9;
}

.cls-61 {
    fill: #a48691;
}

.cls-62 {
    fill: #eddee3;
}

.cls-63 {
    fill: #fcf8ca;
}

.cls-64 {
    fill: #b8b2d8;
}

.cls-65 {
    fill: #eff7ea;
}

.cls-66 {
    fill: #fef7b7;
}

.cls-67 {
    fill: #fee9a0;
}

.cls-99 {
    fill: #ddd162;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#needles {
    -webkit-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform-box: fill-box;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

#arms {
    -webkit-animation: rotate-out 5s linear infinite;
    animation: rotate-out 5s linear infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform-box: fill-box;
}

@-webkit-keyframes rotate-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes rotate-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

#cabins {
    -webkit-animation: cabin-transit 5s linear infinite;
    animation: cabin-transit 5s linear infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform-box: fill-box;
}

@-webkit-keyframes cabin-transit {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes cabin-transit {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

.cabin {
    -webkit-animation: cabin-transform 5s linear infinite;
    animation: cabin-transform 5s linear infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform-box: fill-box;
}

@-webkit-keyframes cabin-transform {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

@keyframes cabin-transform {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

#balloon,
#bunch_of_balloons1,
#bunch_of_balloons {
    -webkit-animation: balloon-anim 5s linear infinite;
    animation: balloon-anim 5s linear infinite;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform-box: fill-box;
}

@-webkit-keyframes balloon-anim {
    0% {
        -webkit-transform: rotate(0deg) translate(0);
        transform: rotate(0deg) translate(0);
    }
    25% {
        -webkit-transform: rotate(2deg) translateY(5px);
        transform: rotate(2deg) translateY(5px);
    }
    50% {
        -webkit-transform: rotate(-2deg) translateY(-5px);
        transform: rotate(-2deg) translateY(-5px);
    }
    75% {
        -webkit-transform: rotate(-2deg) translateY(5px);
        transform: rotate(-2deg) translateY(5px);
    }
    100% {
        -webkit-transform: rotate(0deg) translate(0);
        transform: rotate(0deg) translate(0);
    }
}

@keyframes balloon-anim {
    0% {
        -webkit-transform: rotate(0deg) translate(0);
        transform: rotate(0deg) translate(0);
    }
    25% {
        -webkit-transform: rotate(2deg) translateY(5px);
        transform: rotate(2deg) translateY(5px);
    }
    50% {
        -webkit-transform: rotate(-2deg) translateY(-5px);
        transform: rotate(-2deg) translateY(-5px);
    }
    75% {
        -webkit-transform: rotate(-2deg) translateY(5px);
        transform: rotate(-2deg) translateY(5px);
    }
    100% {
        -webkit-transform: rotate(0deg) translate(0);
        transform: rotate(0deg) translate(0);
    }
}

#clouds-front {
    -webkit-animation: cloud-transit infinite ease-in-out 5s;
    animation: cloud-transit infinite ease-in-out 5s;
}

#clouds-back {
    -webkit-animation: cloud-transit-2 infinite ease-out 5s;
    animation: cloud-transit-2 infinite ease-out 5s;
}

@-webkit-keyframes cloud-transit {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-5%);
        transform: translateX(-5%);
        opacity: 0;
    }
}

@keyframes cloud-transit {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-5%);
        transform: translateX(-5%);
        opacity: 0;
    }
}

@-webkit-keyframes cloud-transit-2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}

@keyframes cloud-transit-2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
    }
}
